<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>声音克隆</title>
        <style>
            body {
                background-color: #f2f2f2;
                font-family: "NSimSun";
                padding: 20px;
                text-align: center; /* 使所有内容居中 */
            }

            .audio-container {
                width: 300px; /* 固定宽度 */
                height: 50px; /* 固定高度 */
                border: 1px solid #ccc; /* 实线边框 */
                margin: 20px auto; /* 自动居中 */
                display: flex; /* 使用 Flexbox 布局 */
                justify-content: center; /* 水平居中 */
                align-items: center; /* 垂直居中 */
                background-color: #f9f9f9; /* 背景色 */
            }

            .audio-player {
                width: 100%;
                height: 100%;
                object-fit: cover; /* 使音频播放器适应容器 */
                display: none; /* 初始隐藏播放组件 */
            }

            .container {
                margin: 20px 0;
                font-family: "NSimSun";
            }

            input {
                font-family: "NSimSun", serif; /* 设置输入框字体为新宋体 */
                width: 300px; /* 固定宽度 */
                height: 30px; /* 固定高度 */
            }

            /* 按钮样式 */
            button, .file-btn {
                cursor: pointer; /* 鼠标悬停显示为手型 */
                font-family:"Microsoft YaHei";
                background-color: white; /* 白色背景 */
                border: 1px solid #888; /* 灰色边框 */
                color: black; /* 黑色字体 */
                padding: 5px 15px;
                margin: 10px;
                text-align: center; /* 文字居中 */
                cursor: pointer;
                border-radius: 15px; /* 圆角边框 */
                font-size: 14px; /* 确保字体一致 */
                display: inline-block; /* 保证 label 显示为块状元素 */
                line-height: normal; /* 确保高度一致 */
            }

            /* 禁用按钮样式 */
            button:disabled, .file-btn:disabled {
                background-color: #f0f0f0;
                border-color: #ccc;
                color: #aaa;
                cursor: not-allowed;
            }

            /* 悬停效果 */
            button:hover, .file-btn:hover {
                background-color: #f0f0f0; /* 浅灰色背景 */
                border-color: #666666; /* 深一点的边框 */
            }

            /* 点击效果 */
            button:active, .file-btn:active {
                background-color: #666666; /* 深灰色背景 */
                color: #ffffff; /* 白色文字 */
                border-color: #444444; /* 更深的边框 */
            }

            /* 隐藏原始文件选择框 */
            #audioFile {
                display: none;
            }

            /* 红点样式 */
            #recordingDot {
                width: 12px; /* 红点的大小 */
                height: 12px;
                border-radius: 50%;
                background-color: red;
                display: none; /* 默认为隐藏 */
                margin-right: 10px; /* 与按钮之间留间距 */
            }

            /* 按钮容器 */
            .button-container {
                display: flex; /* 使用 flexbox 布局 */
                align-items: center; /* 垂直居中对齐 */
                justify-content: center; /*水平居中 */
                gap: 15px; /* 按钮之间的间距 */
                margin: 10px 0;
            }
        </style>
    </head>
    <body>
        <!-- 录音功能 -->
        <div class="container">
            <div>请点击开始录音并读出这句话：“今天真是个好日子，我感到非常高兴”</div>
            <!-- 音频容器 -->
            <div id="audioContainer" class="audio-container">
                <audio id="audioPreview" class="audio-player" controls></audio>
            </div>
            <div class="button-container">
                <div id="recordingDot"></div> <!-- 红点 -->
                <button id="toggleRecord">开始录音</button>
                <label for="audioFile" class="file-btn">选择文件</label>
                <input type="file" id="audioFile" accept="audio/*">
            </div>
        </div>

        <!-- 输入框，提交时使用 -->
        <div class="container">
            <input type="text" id="refText" placeholder="这里填写音频文件中对应的文字内容"
                   value="今天真是个好日子，我感到非常高兴" style="display: none">
            <span>请输入文本：</span><input type="text" id="genText" placeholder="这里填写要生成语音的文本。">
        </div>

        <!-- 提交按钮 -->
        <div class="container">
            <button id="submitBtn">开始语音生成</button>
        </div>

        <!-- 返回音频播放区域 -->
        <div class="container">
            <h2>生成音频</h2>
            <!-- 新的音频容器 -->
            <div id="responseAudioContainer" class="audio-container">
                <audio id="responseAudio" class="audio-player" controls></audio>
            </div>
        </div>
        <script src="js/config.js"></script>
        <script>
            const apiBaseUrl = getApiBaseUrl();
            let mediaRecorder;
            let audioChunks = [];
            let audioFile = null;
            let isRecording = false; // 用于判断是否正在录音

            // 获取音频预览的元素
            const audioPreview = document.getElementById('audioPreview');
            const responseAudio = document.getElementById('responseAudio'); // 新的音频播放器
            const toggleRecordBtn = document.getElementById('toggleRecord');
            const submitBtn = document.getElementById('submitBtn');
            const audioFileInput = document.getElementById('audioFile');
            const recordingDot = document.getElementById('recordingDot'); // 红点元素

            // 录音操作
            toggleRecordBtn.addEventListener('click', () => {
                if (isRecording) {
                    // 停止录音
                    mediaRecorder.stop();
                    isRecording = false;
                    toggleRecordBtn.textContent = '开始录音';
                    recordingDot.style.display = 'none';
                } else {
                    // 开始录音
                    navigator.mediaDevices.getUserMedia({audio: true})
                        .then(stream => {
                            mediaRecorder = new MediaRecorder(stream);
                            audioChunks = []; // 每次录音前清空数据
                            audioPreview.style.display = 'none'; // 显示播放器
                            mediaRecorder.ondataavailable = event => {
                                audioChunks.push(event.data);
                            };
                            mediaRecorder.onstop = () => {
                                const audioBlob = new Blob(audioChunks, {type: 'audio/wav'});
                                console.log("录音完成，生成的音频 Blob:", audioBlob);
                                audioFile = audioBlob;
                                audioPreview.src = URL.createObjectURL(audioBlob); // 设置播放器音频
                                audioPreview.style.display = 'block'; // 显示播放器
                            };
                            mediaRecorder.start();
                            isRecording = true;
                            toggleRecordBtn.textContent = '停止录音';
                            recordingDot.style.display = 'block';
                        })
                        .catch(err => {
                            console.error("录音出错:", err);
                            alert("无法访问麦克风，请检查权限");
                        });
                }
            });

            // 选择文件上传
            audioFileInput.addEventListener('change', (event) => {
                // 清空之前的音频
                audioPreview.style.display = 'none';
                audioPreview.src = '';
                audioFile = null;

                const file = event.target.files[0];
                if (file && file.type.startsWith('audio/')) {
                    const objectUrl = URL.createObjectURL(file); // 创建 URL 对象
                    audioPreview.src = objectUrl;  // 设置音频播放器的源
                    // 确保播放器显示
                    audioFile = file;  // 保存音频文件
                    audioPreview.style.display = 'block';  // 显示播放器
                } else {
                    alert('请选择一个有效的音频文件');
                }
            });

            submitBtn.addEventListener('click', () => {
                responseAudio.src = '';
                responseAudio.style.display = 'none';
                // 获取用户输入的文本
                const refText = document.getElementById('refText').value;
                const genText = document.getElementById('genText').value;

                // 确保音频文件已上传
                if (!audioFile) {
                    alert('请录制或上传音频');
                    return;
                }

                const formData = new FormData();
                formData.append("ref_text", refText);  // 使用输入的中文文本
                formData.append("gen_text", genText);  // 使用输入的中文文本
                formData.append("model", "e2-tts");
                formData.append("audio", audioFile, "1.wav");

                alert('已提交工作流，请等待音频生成');

                // 使用 fetch API 发送 POST 请求
                fetch(apiBaseUrl+'/tts', {
                    method: 'POST',
                    body: formData  // 不需要设置 Content-Type
                })
                    .then(response => {
                        alert('音频已生成');
                        return response.blob();  // 获取响应的音频二进制数据
                    })
                    .then(blob => {
                        if (blob) {
                            // 创建一个 URL 对象来引用 Blob 数据
                            const audioUrl = URL.createObjectURL(blob);
                            // 设置返回的音频播放 URL
                            responseAudio.src = audioUrl;
                            responseAudio.style.display = 'block';  // 显示音频播放器
                        } else {
                            alert('请求失败，未返回有效音频');
                        }
                    })
                    .catch(error => {
                        alert('请求出错: ' + error);
                    });
            });
        </script>

    </body>
</html>
